<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>宠物商城</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/common.css}" rel="stylesheet" type="text/css"/>
    <link href="../../../static/css/custom.css" th:href="@{/css/custom.css}" rel="stylesheet" type="text/css"/>
    <script th:src="@{/layui/jquery-3.2.1.min.js}"></script>
    <script th:src="@{/layui/layui.js}"></script>
</head>
<body class="site-home">
<!--头部模块-->
<div th:replace="mall/comm::head"></div>
<div class="layui-container" id="content">
    <!--购物车-->
    <div class="layui-row">
        <div class="layui-col-md12"><h1 class="site-h1"><i class="fa fa-gift" style="color: #FF5722;"></i>
            &nbsp;我的购物车</h1></div>
    </div>
    <div class="layui-row" style="text-align: center;">
        <div class="layui-row" id="product_cart" style="overflow-x: auto;">
            <div class="layui-col-md12">
                <table class="layui-table" lay-skin="nob" id="cart">
                    <thead>
                    <tr>
                        <th lay-data="{field:'id'}">商品图片</th>
                        <th lay-data="{field:'name'}">商品名称</th>
                        <th lay-data="{field:'number', edit: 'text'}">数量</th>
                        <th lay-data="{field:'price', edit: 'text'}">单价</th>
                        <!--<th lay-data="{field:'number', edit: 'text'}">产品总价</th>-->
                    </tr>
                    </thead>
                    <tbody id="myTbody"></tbody>
                </table>
            </div>
        </div>
        <div class="layui-row" id="order_form">
            <div class="layui-col-md5 layui-col-sm5 layui-col-xs12 layui-col-md-offset7">
                <form class="layui-form" action="../order/submit.do">
                    <div class="layui-form-item">
                        <label class="layui-form-label">收货人：</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" required="required" lay-verify="required"
                                   placeholder="请输入收货人"
                                   autocomplete="off" class="layui-input"/>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">电话：</label>
                        <div class="layui-input-block">
                            <input type="text" name="phone" required="required" lay-verify="required"
                                   placeholder="请输入收货人电话"
                                   autocomplete="off" class="layui-input"/>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">地址：</label>
                        <div class="layui-input-block">
                            <input type="text" name="addr" required="required" lay-verify="required"
                                   placeholder="请输入收货人地址"
                                   autocomplete="off" class="layui-input"/>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">备注：</label>
                        <div class="layui-input-block">
                            <input type="text" name="addr" required="required" lay-verify="required"
                                   placeholder="可说明宠物的情况"
                                   autocomplete="off" class="layui-input"/>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block" style="text-align: right;">
                            <span id="total" class="price1"></span>&emsp;
                            <button class="layui-btn layui-btn-lg layui-btn-radius layui-btn-danger"
                                    lay-submit="lay-submit" lay-filter="formDemo">提交订单
                            </button>
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>
    <script>
        //            <![CDATA[
        $(function () {
            //加载购物车信息
            loadCart();
        });

        layui.use('form', function () {
            var form = layui.form;
        });

        function loadCart() {
            $.get("listCart.do",function (data) {
                if (data.state == 0) {
                    var table = $("#cart");
                    if (data.data.length <= 0) {
                        layer.msg("您的购物车中暂无商品，快去购物吧！");
                        $("#order_form").fadeOut();
                        return;
                    }
                    appendToPage(table, data.data);
                } else {
                    layer.msg(data.message);
                }
                // return data.data;
            });
        }

        function getProduct() {
            console.log(items);
        }



        var total = 0;

        function appendToPage(table, items) {

            $(items).each(function (index, item) {
                var tr = $("<tr class='mytr' style='max-height: 200px;'></tr>");
                tr.append($("<td style=''><img class='img_responsive' src='" + item.product.image + "'/></td>"));
                tr.append($("<td style='text-align: left;width: 180px;'>" + item.product.title + "</td>"));
                // tr.append($("<td>数量：" + item.count + "</td>"));
                tr.append($("<td>" +"<div class=\"jiajian\"><span class=\"jian\" onclick=\"num_sub(this)\">-</span><span class='num'>"+ item.count +"</span><span class=\"jia\" onclick=\"num_add(this)\">+</span></div>"+ "</td>"));
                tr.append($("<td class='danjia'>" + item.product.shopPrice + "</td>"));
                // tr.append($("<td>" + item.subTotal + "</td>"));
                tr.append($("<td><button onclick='remove(this," + item.product.id + "," + item.subTotal + ")' class='layui-btn layui-btn-radius layui-btn-danger'>删除</button></td>"));
                table.append(tr);
                total += item.subTotal;
            });
            $("#total").html("总价：￥<span class='totalMoney'>" + total+"</span>");
        }

        //加的效果
        function num_add(on_this){

            var totalQuantity = 0;    //总数量
            var totalMoney = 0;       //总金额
            var totalIntegral = 0;    //总积分
            $("#myTbody tr").each(function(){

                //获取当前行的单价
                this_price = $(this).children(".danjia").text();
                this_price = parseFloat(this_price);


                //获取当前行的数量
                this_num = $(this).find(".num").text();
                this_num = parseInt(this_num);

                //获取当前行的总价格、总积分
                var trmoney = this_price*this_num;

                //总金额、总数量、总积分
                totalQuantity += this_num*1;   //总数量
                totalMoney += trmoney*1        //总金额
            })
            $(".totalMoney").html(totalMoney);

            this_price = $(on_this).parents("td").siblings("td.danjia").text();//获取单价
            this_price = parseFloat(this_price);
            console.log(totalMoney);
            totalMoney += this_price;
            // this_price.text(totalMoney);
            $('.totalMoney').html(totalMoney.toFixed(2));
            console.log(totalMoney);

            //当前商品数量
            this_num = $(on_this).siblings('.num');
            var get_this_num = parseInt(this_num.text())+1;
            this_num.text(get_this_num);

        }

        //减的效果
        function num_sub(on_this){

            var totalQuantity = 0;    //总数量
            var totalMoney = 0;       //总金额
            $("#myTbody tr").each(function(){

                //获取当前行的单价
                this_price = $(this).children(".danjia").text();
                this_price = parseFloat(this_price);

                //获取当前行的数量
                this_num = $(this).find(".num").text();
                this_num = parseInt(this_num);

                //获取当前行的总价格、总积分
                var trmoney = this_price*this_num;

                //总金额、总数量、总积分
                totalQuantity += this_num*1;   //总数量
                totalMoney += trmoney*1        //总金额
            })
            $(".totalMoney").html(totalMoney);

            //当前商品数量
            this_num = $(on_this).siblings('.num');
            if(this_num.text() <= 1){
                this_num.siblings('.jian').removeAttr('onclick');
                return;
            }else{
                var get_this_num = this_num.text()-1;
                this_num.text(get_this_num);

                this_price = $(on_this).parents("td").siblings("td.danjia").text();//获取单价
                totalMoney -= this_price;
                $('.totalMoney').html(totalMoney.toFixed(2));

            }
        }


        //移除购物车
        function remove(btn, productId, subTotal) {
            $.get("delCart.do?productId=" + productId, function (data) {
                if (data.state == 0) {
                    layer.msg("删除成功！");
                    $(btn).parent().parent().fadeOut();
                    total -= subTotal;
                    $("#total").html("总价：￥" + total);
                } else {
                    layer.msg(data.message);
                }
            })
        }





        //            ]]>
    </script>
</div>
<!--底部-->
<div th:replace="mall/comm::foot"></div>
</body>
</html>